<template>
  <div id='app'>
      <input type="text" placeholder="请输入你的心愿" v-model="love" class="ops">
      <ul class="uu">
          <li><img src="/img1.jpg" alt="" :class="{op:img1}" @click="imgg1"></li>
           <li><img src="/img2.jpg" alt="" :class="{op:img2}" @click="imgg2"></li>
             <li><img src="/img3.jpg" alt="" :class="{op:img3}" @click="imgg3"></li>
               <li><img src="/img4.jpg" alt="" :class="{op:img4}" @click="imgg4"></li>
                 <li><img src="/img5.jpg" alt="" :class="{op:img5}" @click="imgg5"></li>
      </ul>
      <div v-show="!xg">
      <button class="footer" disabled v-show="zxx">再想想</button>
      <button class="footer2"  v-show="!zxx" @click="add">再想想</button>
      </div>

      <button class="footer2"  v-show="xg" @click="xiugai">修改</button>

      <ul class="uu2">
        <li v-for="(c,i) in list" :key="i" v-drag @click="dj(c,i)" class="asdf">
          <img :src="c.src+'.jpg'" alt="" >
          <p>{{c.wen}}</p>
          <span @click.stop="remove(i)">x</span>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      love:'',
      img1:false,
      img2:false,
      img3:false,
      img4:false,
      img5:false,
      zxx:true,
      dp:'',
      xg:false,
      index:'',
      imgsrc:''
    }
  },
  methods: {
    xiugai(){
      this.xg=false
      this.list[this.index].wen=this.love
      if(this.img1==true){
      this.list[this.index].src='img1'
      }
       if(this.img2==true){
      this.list[this.index].src='img2'
      }
       if(this.img3==true){
      this.list[this.index].src='img3'
      }
       if(this.img4==true){
      this.list[this.index].src='img4'
      }
       if(this.img5==true){
      this.list[this.index].src='img5'
      }

      this.love=''
this.img1=false
this.img2=false
this.img3=false
this.img4=false
this.img5=false
this.zxx=true
    },
    dj(i,c){
      console.log(c);
      this.xg=true

this.love=i.wen
this.imgsrc=i.src

if(i.src=='img1'){
this.img1=true
}
if(i.src=='img2'){
this.img2=true
}
if(i.src=='img3'){
this.img3=true
}
if(i.src=='img4'){
this.img4=true
}
if(i.src=='img5'){
this.img5=true
}
       
       this.index=c

    },
    remove(i){
      this.list.splice(i,1)
    },
    imgg1(){
      
    
      if(this.love.length>0){
          this.img1=true
      this.img2=false
      this.img3=false
      this.img4=false
      this.img5=false
this.zxx=false
      }
      
    },
    imgg2(){
      
      if(this.love.length>0){
        this.img1=false
      this.img2=true
      this.img3=false
      this.img4=false
      this.img5=false
this.zxx=false
      }

    },
    imgg3(){
      
   if(this.love.length>0){
     this.img1=false
      this.img2=false
      this.img3=true
      this.img4=false
      this.img5=false
this.zxx=false
      }

    },
    imgg4(){
    
     if(this.love.length>0){
         this.img1=false
      this.img2=false
      this.img3=false
      this.img4=true
      this.img5=false
this.zxx=false
      }

    },imgg5(){
     
   if(this.love.length>0){
      this.img1=false
      this.img2=false
      this.img3=false
      this.img4=false
      this.img5=true
this.zxx=false
      }

    },
    add(){
     
      if(this.list.length==6){
        alert('不能＞6个')
        this.love=''
        this.img1=false
        this.img2=false
        this.img3=false
        this.img4=false
        this.img5=false
        this.zxx=true
        return
      }else{

         if(this.img1==true){
        console.log('img1');
        this.dp='img1'
        this.list.push(
          {
            src:this.dp,
        wen:this.love,
          }
        )
        this.img1=false
        
      }
      if(this.img2==true){
        console.log('img2');
        this.dp='img2'
  this.list.push(
          {
            src:this.dp,
        wen:this.love,
          }
        )
         this.img2=false
      }
      if(this.img3==true){
        console.log('img3');
        this.dp='img3'
  this.list.push(
          {
            src:this.dp,
        wen:this.love,
          }
        )
         this.img3=false

      }
      if(this.img4==true){
        console.log('img4');
        this.dp='img4'
  this.list.push(
          {
            src:this.dp,
        wen:this.love,
          }
        )
         this.img4=false

      }
      if(this.img5==true){
        console.log('img5');
        this.dp='img5'
  this.list.push(
          {
            src:this.dp,
        wen:this.love,
          }
        )
         this.img5=false

      }
      this.love=''
      this.zxx=true

      }
     
     
    }

  },
  mounted() {

  },
  components: {

  }
}
</script>

<style lang='scss'>
.ops{
  border: 1px solid black;
  width: 300px;
  height: 30px;
  margin: 10px 0;
}
.uu{
    display: flex;
    li{
        margin: 0 5px;
        img{
            width: 50px;
            height: 50px;
        }
    }
}
.op{
  border: 3px solid red;
  
}

.uu2{
  width: 100%;
  height: 500px;
  li{
    width: 100px;
    height: 100px;
    position: relative;
    img{
      width: 100%;
      height: 100%;
    }
    p{
      position: absolute;
      top: 20px;
      left: 20px;
      
    }
    span{
       position: absolute;
      top: 0px;
      right: 0px;
      background-color: wheat;
      border: 1px solid red;
    }
   
  }
}
.asdf{
  position: absolute;
  top: 40%;
  left: 20%;
}
</style>
